<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <style>
            div{
                width:0px;height:0px;
                border:100px solid red;
                display:inline-block;
            }
            div.c1{
                border-color:red transparent transparent red;
            }
            div.c2{
                border-color:red red transparent transparent;
            }
            div.c3{
                border-color:transparent transparent red transparent;
                border-width:0px 100px 200px 100px;
                transform:rotate(15deg);   /*变形:平面旋转:15度*/
            }
        </style>
    </head>
    <body>
        <h2>CSS样式实例:边框属性(三角形)</h2>
        <div class='c1'></div>
        <div class='c2'></div>
        <div class='c3'></div>
    </body>
</html>